<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<c:set value="<%=request.getContextPath()%>" var="ctx"></c:set>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户列表</title>
<link rel="stylesheet" type="text/css" href="${ctx}/decorators/css/plugins/toastr/toastr.min.css"></link>
<script src="${ctx}/decorators/js/plugins/toastr/toastr.min.js"></script>
<script src="${ctx}/assert/js/jquery.validate.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
//		choseBtn();	
		
		$("#adminForm").validate({
			debug : false,
			rules : {
				username : {
					required : true,
					minlength : 1,
					maxlength : 10
				},
				tel : {
					required : true,
					isMobile : true
				},
				email : {
					required : true,
					isEmail : true
				},
				status : {
					required : true
				},
				role : {
					required : true
				}
			},
			messages : {
				username : {
					required : "请输入用户名",
					minlength : "用户名最少为1位",
					maxlength : "用户名最多为10位"
				},
				tel : {
					required : "请输入手机号码",
					isMobile : "请输入正确的手机号码"
				},
				email : {
					required : "请输入电子邮箱",
					isEmail : "请输入正确的邮箱地址"
				},
				status : {
					required : "请选择是否禁用"
				},
				role : {
					required : "请选择账户权限"
				}
			}
		});
		
		
	});
	jQuery.validator
	.addMethod(
			"isMobile",
			function(value, element) {
				var length = value.length;
				var mobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
				return (length == 11 && mobile
						.exec(value)) ? true
						: false;
			}, "请正确填写您的手机号码");
	jQuery.validator
	.addMethod(
			"isEmail",
			function(value, element) {
				var length = value.length;
				var mobile = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
				return (length <= 25 && mobile
						.exec(value)) ? true
						: false;
			}, "请正确填写您的邮箱");
		
		


	
	

	
	function checkUsername(){
		document.getElementById("saveBtn1").disabled = false;
		var id = $("#id2").val();
			var username = $('#username').val();
//			alert(username);
			if(username == "" || username == 'undefined'){
				document.getElementById("saveBtn1").disabled = true;
				return;
			}
			$.ajax({
				type : "POST",
				url : "checkUserName", //换成你要请求的action, paperId 是url参数
				data : {
					'username' : username,
					'id' : id
				},
				error : function(msg) {
					toastr.error("用户名重复！")					
				},
				success : function(msg) {
					if(msg == "success"){
						//alert("用户名可用")
					}else{
						toastr.error("用户名重复")
						document.getElementById("saveBtn1").disabled = true;
					}
					
				}
			});
		
		
	}
	
	
	function showAdminModel(index, id) {
		var role1 =$("#role1").val();
		//新增用户
		if (index == 1) {
			$("#errMsg").html("");
			$("#adminModelTitle").html("新增用户");
			$("#id").val("");
			$("#username").val("");
			$("#tel").val("");
			$("#email").val("");
			if(role1 == 0){
				return ;
			}
			if(role1 == 1){
				$("#role option[value='0']").attr("selected", true);
				$("#role").attr('disabled',true);
				$("input[type='radio']").attr('disabled',false);
			}
			
		}
		//更新用户
		if (index == 2) {
			//若为编辑操作
			$("#adminModelTitle").html("编辑用户");
			$("#errMsg").html("");
			//编辑页面初始化赋值
			$.ajax({
				type : "POST",
				url : "updateInit", //换成你要请求的action, paperId 是url参数
				data : {
					'id' : id
				},
				error : function(msg) {
					toastr.error("查询用户失败！")
				},
				success : function(data) {
					var admin = eval("(" + data + ")");
					//console.log(admin);
					initUpdateModel(admin);
				}
			});
		}
		//删除用户
		if (index == 3) {
			document.getElementById("alertInfo").innerHTML = "确定要删除该用户吗？";
			$("#id1").val(id);
		}
		if (index == 4) {//启用用户
			document.getElementById("alertInfo").innerHTML = "确定要启用该用户吗？";
			$("#fobidId").val(id);
			$("#fobidStatus").val("1");
		}
		if (index == 5) {//禁用用户
			document.getElementById("alertInfo").innerHTML = "确定要禁用该用户吗？";
			$("#fobidId").val(id);
			$("#fobidStatus").val("0");
		}
	}

	function initUpdateModel(admin) {
		$("#role").attr('disabled',false);
		var role = admin.role;
		var role1 = $('#role1').val();
		$("#id2").val(admin.id);
		$("#username").val(admin.username);
		$("#tel").val(admin.tel);
		$("#email").val(admin.email);
		var type = 0;
		if (admin.status == 1) {
			type = 1;
		}
		if(role1 != 2){
			$("#role").attr('disabled',true);
			$("input[type='radio']").attr('disabled',true);
		}
		
		if(role1 == 1){
			if(role != role1){
				$("#role option[value='1']").remove();
			}			
		}
		if(role1 == 2){
			if(role != role1){
				$("#role option[value='2']").remove();
			}			
		}
		$("#role option").each(function() { //遍历全部option
			if ($(this).val() == role) {
				$(this).attr("selected", true);
			}
			if($(this).val() == role1){
				$("#role").attr('disabled',true);
			}		
		});
		$("input[name='status']").each(function() {
			if ($(this).val() == type) {
				this.checked = true;
			}
		});
		
	}
	
	function saveAdmin() {
		document.getElementById("saveBtn1").disabled = false;
		var id = $("#id2").val();
		var userName = $("#username").val();
		//表单验证
		if (!$("#adminForm").valid()) {
//			document.getElementById("saveBtn1").disabled = true;
			return;
		}
		
		$("#adminForm").submit();
				
		
	}

	/**
	 * 删除
	 */
	function delUser() {
		var id = $("#id1").val();
//		alert(id);
		$.ajax({
			type : "POST",
			url : "deleteUser", //换成你要请求的action, paperId 是url参数
			data : {
				'id' : id
			},
			dateType : 'text',
			success : function(msg) {
				if (msg == "success") {
					document.getElementById("alertDel").innerHTML = "删除成功！";
					document.location.reload();
				}
			},
			error : function(msg) {
				toastr.error("删除失败！")
			}
		});
	}

	/**
	 * 启用，禁用用户状态
	 */
	function fobidUser() {
		var id = $("#fobidId").val();
		var fobidStatus = $("#fobidStatus").val();
		$.ajax({
			type : "POST",
			url : "fobidUser", //换成你要请求的action, paperId 是url参数
			data : {
				'id' : id,
				'status' : fobidStatus
			},
			dateType : 'text',
			success : function(msg) {
				if (msg == "success") {
					document.location.reload();
				}
			}
		});
	};
</script>

</head>
<body>


      <div class="row">
            <div class="col-lg-12">
               <div class="row wrapper border-bottom white-bg ibox-title">
                         <div class="col-lg-11">
                             <h3>用户列表</h3><input type="hidden" id="role1" value="${admin.role }"/>
                         </div>
                         <div class="col-lg-1">
                         	<c:if test="${admin.role >= 1}">
								<button data-toggle="modal" data-target="#addModal" id="addModal1"
									class="btn btn-success btn-block" onclick="showAdminModel(1,0);">
									新增
								</button>
                         	</c:if>
                         </div>
                </div>

           <div class="wrapper wrapper-content animated fadeInRight">
               <div class="ibox-title">
					<table class="table table-striped table-bordered table-hover dataTables-example text-center" id="table">
					<thead>
						<tr>
							<th class="text-center">用户名</th>
							<th class="text-center">角色</th>
							<th class="text-center">手机号</th>
							<th class="text-center">邮箱</th>
							<th class="text-center">是否禁用</th>
							<th class="text-center">操作</th>
						</tr>
					</thead>
					<tbody id="adminBody">
						<c:forEach var="ad" items="${adminList }" varStatus="status">
							<tr>
								<td>${ad.username }</td>
								<td>
									<c:if test="${ad.role eq 1}">超级用户</c:if>
									<c:if test="${ad.role eq 0}">普通用户</c:if>									
								</td>
								<td>${ad.tel }</td>
								<td>${ad.email }</td>
								<td>								
									<c:if test="${ad.status eq 1}">否</c:if>
									<c:if test="${ad.status eq 0}">是</c:if>
								</td>
								<td>
									<c:if test="${admin.role == 0}">
										<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addModal"
                            			onclick="showAdminModel(2,${ad.id});">编辑</button>&nbsp;&nbsp;
									</c:if>
									<c:if test="${admin.role == 1 && admin.role != ad.role}">										
										<c:if test="${ad.status eq 1}">										
												<button type="button" class="btn btn-warning" onclick="showAdminModel(5,${ad.id});" 
	                                			data-toggle="modal" data-target="#fobidModal">禁用</button>&nbsp;&nbsp;											
										</c:if>
										<c:if test="${ad.status eq 0}">
												<button type="button" class="btn btn-info" onclick="showAdminModel(4,${ad.id});"
	                                			data-toggle="modal" data-target="#fobidModal">启用</button>&nbsp;&nbsp;
										</c:if>	
									</c:if>
									<c:if test="${admin.role == 1 && admin.role == ad.role}">
										<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addModal"
                           				onclick="showAdminModel(2,${ad.id});">编辑</button>&nbsp;&nbsp;
									</c:if>

									<c:if test="${admin.role == 2}">										
										<c:if test="${ad.status eq 1}">										
												<button type="button" class="btn btn-warning" onclick="showAdminModel(5,${ad.id});" 
	                                			data-toggle="modal" data-target="#fobidModal">禁用</button>&nbsp;&nbsp;											
										</c:if>
										<c:if test="${ad.status eq 0}">
												<button type="button" class="btn btn-info" onclick="showAdminModel(4,${ad.id});"
	                                			data-toggle="modal" data-target="#fobidModal">启用</button>&nbsp;&nbsp;
										</c:if>	
										
										<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addModal"
                            			onclick="showAdminModel(2,${ad.id});">编辑</button>&nbsp;&nbsp;

										
										<button type="button" class="btn btn-danger" onclick="showAdminModel(3,${ad.id});" 
	                          				data-toggle="modal" data-target="#delModal">删除</button>
									</c:if>	
								</td>
							</tr>
						</c:forEach>
					</tbody>
				</table>
	        </div>
	    </div>
	   </div>
	</div>
	<!-- 新增/编辑的模态层 -->
	<div class="modal fade" id="addModal" tabindex="-1" role="dialog"
		aria-labelledby="adminModelTitle" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="adminModelTitle"></h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" id="adminForm" name="adminForm"
						method="post" action="${ctx}/admin/saveAdmin">
						<div style="display: none" id="msgDiv2">
							<label id="errMsg2" style="color: red"></label>
						</div>
						<div class="form-group">
							<label class="col-lg-3 control-label">用户名称：</label>
							<div class="col-lg-8">
								<input type="text" class="form-control" name="username"
									id="username" onblur="checkUsername();">
							</div>
						</div>
						<div class="form-group">
							<label class="col-lg-3 control-label">用户类别：</label>
							<div class="col-lg-8">
								<select class="form-control" name="role" id="role">
									<option value="0" selected="">普通用户</option>
									<c:if test="${admin.role >= 1 }">
										<option value="1">超级用户</option>									
									</c:if>
								</select>
							</div>
						</div>
						<div class="form-group">
							<label class="col-lg-3 control-label">电话号码：</label>
							<div class="col-lg-8">
								<input type="text" class="form-control" name="tel"
									id="tel">
							</div>
						</div>
						<div class="form-group">
							<label class="col-lg-3 control-label">电子邮箱：</label>
							<div class="col-lg-8">
								<input type="text" class="form-control" name="email"
									id="email">
							</div>
						</div>
						
						<div class="form-group">
							<label class="col-lg-3 control-label">是否禁用：</label>
							<div class="col-lg-8">
								<label><input type="radio" name="status" value="0" />是</label>
								&#12288;&#12288; <label><input type="radio"	name="status" value="1" />否</label>
							</div>
		
						</div>
						<div class="form-group">
							<input type="hidden" class="form-control" id="id2" name="id"/>
						</div>
						
						<div class="form-group">
							<div class="col-lg-offset-9 col-lg-8">
								<button class="btn btn-large btn-primary" id="saveBtn1"
									 onclick="saveAdmin();return false;">保存</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
	<!-- 删除的模态层 -->
	<div class="modal fade" id="delModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">提示</h4>
				</div>
				<div class="modal-body" id="alertDel">确定删除该条用户信息吗？</div>
				<div class="modal-footer">
					<input type="hidden" id="id1" name="id" value="" />
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" onclick="delUser()" class="btn btn-primary"
						id="delBtn">删除</button>
				</div>
			</div>
		</div>
	</div>
	<!-- 禁用的模态层 -->
	<div class="modal fade" id="fobidModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">提示</h4>
				</div>
				<div class="modal-body" id="alertInfo"></div>
				<div class="modal-footer">
					<input type="hidden" id="fobidId" value="" /> <input type="hidden"
						id="fobidStatus" value="" />
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" onclick="fobidUser();"
						class="btn btn-primary" id="fobidBtn">确定</button>
				</div>
			</div>
		</div>
	</div>
</body>
</html>